<template>
  <div class="board-plan">
    <div ref="plan" v-if="false"></div>
    <div>
      <el-row class="plan-head">
        <el-col :span="5">
          信息
        </el-col>
        <el-col :span="6">
          战术板
        </el-col>
        <el-col :span="13">
          描述
        </el-col>
      </el-row>
    </div>
      <draggable class="list-group" element="ul" v-model="planList"
            :options="dragOptions"
            @start="isDragging=true"
            @end="handleMoveEnd">
        <transition-group type="transition" :name="'flip-list'">
            <li class="list-group-item " 
              v-for="(item,index) in planList"
              :key="index">
                <board-plan
                  :showUp="index !==0 "
                  :showDown="index !== planList.length -1"
                  :data="item"
                  :showDelete="planList.length > 1"
                  @delete="handleDel(index)"
                  @up="handleUp(index)"
                  @down="handleDown(index)">
                </board-plan>
            </li>
        </transition-group>
      </draggable>
      <el-button type="link" @click="handleLoadMore" class="load_more" v-if="isflength > loadNum">点击加载更多...</el-button>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import BoardPlan from './components/BoardPlan'
import api from 'api/tactics'
import {BasketBallPlaybook} from 'utils/playbook' // eslint-disable-line
export default{
  props: {
    sportType: [String, Number],
    tacticTypeId: [String, Number],
    tacticId: [String, Number]
  },
  components: {
    BoardPlan,
    draggable
  },
  computed: {
    dragOptions () {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    },
    tacticsType () {
      return this.$store.getters.tactics_type_list
    },
    tacticsList () {
      return this.$store.getters.tactics_list
    },
    tacticsInfo () {
      return this.$store.getters.tactics_info
    }
  },
  data () {
    return {
      editable: true,
      isDragging: false,
      playbook: '',
      planList: [],
      loadNum: 4,
      isflength: 0
    }
  },
  watch: {
    'tacticsInfo.key' () {
      this.handleDrawFram(this.loadNum)
    },
    tacticId () {
      this.planList = []
      this.isflength = 0
      this.loadNum = 4
    }
  },
  mounted () {
    this.handleDrawFram(this.loadNum)
  },
  methods: {
    handleDrawFram (loadNum) { // 绘制每一帧
      let plandom = this.$refs['plan']
      this.playbook = new BasketBallPlaybook(plandom)
      this.playbook.scale = 0.8
      this.playbook.deserialize(this.tacticsInfo)
      this.playbook.update()
      this.isflength = this.playbook.frames.length
      let flength = this.playbook.frames.length > loadNum ? loadNum : this.playbook.frames.length
      if (this.playbook.frames && this.playbook.frames.length) {
        let showDrawList = Array.from(this.playbook.frames).slice(0, flength)
        this.planList = showDrawList.map((item, index) => {
          return {
            duration: item.duration,
            pNum: item.playerNumber !== 0 ? item.playerNumber : '',
            ballNum: item.ballNumber !== 0 ? item.ballNumber : '',
            basckety: item.basketNumber !== 0 ? item.basketNumber : '',
            instrument: item.equipmentNumber !== 0 ? item.equipmentNumber : '',
            isGroup: item.isGroup ? '是' : '否',
            others: item.other ? item.other : '',
            description: item.describe ? item.describe : '',
            src: this.playbook.toDataURL(item, 0.2)
          }
        })
      }
    },
    handleDel (index) {
      this.$confirm('确认删除该战术板帧吗？删除后不可恢复', '温馨提示', {
        type: 'warning'
      }).then(() => {
        let frame = this.playbook.frames[index]
        this.playbook.removeFrame(frame)
        this.planList.splice(index, 1)
        this.updateList()
      }).catch(() => {})
    },
    handleUp (index) {
      if (this.planList.length > 1 && index !== 0) {
        this.planList = this.swapItems(this.planList, index, index - 1)
        let j = this.playbook.frames[index - 1]
        this.playbook.frames[index - 1] = this.playbook.frames[index]
        this.playbook.frames[index] = j
        this.updateList()
      }
    },
    handleDown (index) {
      if (this.planList.length > 1 && index !== (this.planList.length - 1)) {
        this.planList = this.swapItems(this.planList, index, index + 1)
        let h = this.playbook.frames[index]
        this.playbook.frames[index] = this.playbook.frames[index + 1]
        this.playbook.frames[index + 1] = h
        this.updateList()
      }
    },
    swapItems (arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    handleMoveEnd (ev) {
      let [currentIndex, draggableIndex] = [ev.oldIndex, ev.newIndex]
      let [h, q] = [this.playbook.frames[draggableIndex], this.playbook.frames[currentIndex]]
      if (currentIndex < draggableIndex) { // 下移动
        if (draggableIndex > currentIndex + 1) {
          for (let j = currentIndex; j < draggableIndex; j++) {
            this.playbook.frames[j] = this.playbook.frames[j + 1]
          }
          this.playbook.frames[draggableIndex] = q
        } else {
          this.playbook.frames[draggableIndex] = q
          this.playbook.frames[currentIndex] = h
        }
      } else { // 上移动
        if (draggableIndex < currentIndex - draggableIndex) {
          for (let j = currentIndex; j > draggableIndex; j--) {
            this.playbook.frames[j] = this.playbook.frames[j - 1]
          }
          this.playbook.frames[draggableIndex] = q
        } else {
          this.playbook.frames[draggableIndex] = q
          this.playbook.frames[currentIndex] = h
        }
      }
      this.updateList()
    },
    updateList () {
      this.playbook.update()
      api.update({
        sportTypeId: this.sportType,
        tacticTypeId: this.tacticTypeId,
        id: this.tacticId,
        content: this.playbook.serialize()
      }, {context: this, successMsg: 'none'}).then(() => {
        this.$store.commit('TACTICS_INFO', Object.assign({}, JSON.parse(this.playbook.serialize()), {
          key: Math.random().toString(36).substr(2)
        }))
      })
    },
    handleLoadMore () {
      this.loadNum += 2
      this.handleDrawFram(this.loadNum)
    }
  }
}
</script>
<style lang="scss">
.plan-head{
  background: #f5f5f5;
  color: #5d5d5d;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  margin: 30px auto 15px;
}
.board-list{
  li{
    padding: 17px 0 33px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    &:hover{
      border: 1px solid #33c378;
      padding: 16px 0 32px;
    }
  }
}
.flip-list-move {
  transition: transform 0.5s;
}
.list-group-item {
  cursor: move;
  margin-bottom: 20px;
  i{
    cursor: pointer;
  }
}
.load_more {
  text-align: center;
  transform: translate(-50%, -50%);
  left: 50%;
  position: relative;
  margin-top: 10px 
}
</style>